<template>
  <div>
    <h1>新增会员信息</h1>
    <table class="table">
      <tbody>
        <tr>
          <td>会员名</td>
          <td>
            <input type="text" v-model="data.name" />
          </td>
        </tr>
        <tr>
          <td>密码</td>
          <td>
            <input type="password" v-model="data.password" />
          </td>
        </tr>
        <tr>
          <td>会员头像</td>
          <td>
            <input type="file" @change="upload" />
            <img :src="'https://localhost:7114'+data.img" style="width: 100px;height: 100px;" /> 
          </td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" :value="true" v-model="data.sex" />男
            <input type="radio" :value="false" v-model="data.sex" />女
          </td>
        </tr>
        <tr>
          <td>爱好</td>
          <td>
            <span v-for="h in hobby">
                <input type="checkbox" v-model="hobbydata" :value="h" />{{ h }} 
            </span>
          </td>
        </tr>
        <tr>
          <td>会员等级</td>
          <td>
            <select v-model="data.memberLevelId">
             <option value="0">请选择</option>
            <option v-for="x in xldata" :value="x.id">{{ x.names }}</option>
         </select>
          </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="添加" @click="add" />
                <a href="/">返回列表</a>
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import { useMemberStore } from '@/stores/member';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router=useRouter()
const users = useMemberStore()

onMounted(()=>{
    getuser()
    xlk()
})

const xldata=ref([{
    "id": 1,
    "names": "普通会员"
  }])

const xlk=()=>{
    axios.get("https://localhost:7114/api/Lev",{params:xldata.value}).then(res=>{
        xldata.value=res.data
    })
}

const getuser=()=>{
    if(users.member.state==false){
        alert('用户未登录,请登录后再试')
        router.push({path:"/login"})
    }
}

const hobby=ref(["游戏","足球","篮球","羽毛球"])
const hobbydata=ref([])


const data = ref({
  "id": 0,
  "name": "",
  "password": "",
  "sex": true,
  "houbbyCount": 0,
  "houbbyString": "",
  "isDelete": true,
  "img": "string",
  "memberLevelId": 0,
  "createData": "2025-04-10T11:44:21.229Z"
})

const add=()=>{
    data.value.houbbyString=hobbydata.value.toString()
    data.value.houbbyCount=hobbydata.value.length
    axios.post("https://localhost:7114/api/Member/AddMember",data.value).then(res=>{
        if(res.data>0){
            alert('添加成功')
            router.push({path:"/"})
        }
        else{
            alert('添加失败')
        }
    })
}

const upload=(e:any)=>{
   var f = e.target.files[0]
   var fd = new FormData()
   fd.append("file",f)
   if(f.size>1024*1024*2){
    alert('图片大小不能超过2MB')
    return;
   }
   if(f.type!='image/jpeg'&&f.type!='image/png'){
    alert('图片格式只能为JPG|PNG')
    return;
   }
   axios.post("https://localhost:7114/api/UpLoad",fd).then(res=>{
          data.value.img=res.data
   })
}

</script>

<style scoped></style>
